<template>
	<div class="left-twos">
		<div class="title">旅游资源</div>
		<ul class="list-wrap">
			<li class="list">
				<div class="name">
					<img src="../image/jingdian.png" />
					景点
				</div>
				<div class="sum">{{ basicInfo.scenicNum }}</div>
			</li>
			<li class="list">
				<div class="name">
					<img src="../image/lvxingshe.png" />
					旅行社
				</div>
				<div class="sum">{{ basicInfo.travelAgencyNum }}</div>
			</li>
			<li class="list">
				<div class="name">
					<img src="../image/jiudian.png" />
					酒店住宿
				</div>
				<div class="sum">{{ basicInfo.hotelNum }}</div>
			</li>
			<li class="list">
				<div class="name">
					<img src="../image/techan.png" />
					土特产
				</div>
				<div class="sum">{{ basicInfo.specialty }}</div>
			</li>
			<li class="list">
				<div class="name">
					<img src="../image/canyin.png" />
					餐饮娱乐
				</div>
				<div class="sum">{{ basicInfo.restaurant }}</div>
			</li>
			<li class="list">
				<div class="name">
					<img src="../image/parking.png" />
					停车场
				</div>
				<div class="sum">{{ basicInfo.parking }}</div>
			</li>
		</ul>
	</div>
</template>

<script>
export default {
	name: 'left-two',
	data() {
		return {
			basicInfo: {}
		}
	},
	props: {
		propBasicData: {
			type: Object,
			default: () => {}
		}
	},
	watch: {
		propBasicData: {
			handler(newValue) {
				this.basicInfo = newValue
			},
			immediate: true,
			deep: true
		}
	}
}
</script>

<style scoped lang="less">
@import '../assets/css/mixin.css';
.left-twos {
	width: 100%;
	height: 100%;
	border: 1px solid #21b5e3;
	box-sizing: border-box;
	border-radius: 6px;
	.list-wrap {
		width: 100%;
		height: calc(100% - 33px);
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		padding: 18px 20px;
		box-sizing: border-box;
		.list {
			width: 30%;
			margin-right: 4.5%;
			height: 42px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: linear-gradient(35deg, rgba(0, 192, 255, 1) 0%, rgba(3, 69, 201, 1) 100%);
			box-shadow: 0px 3px 6px rgba(4, 27, 104, 0.16);
			opacity: 0.96;
			border-radius: 4px;
			padding: 0 10px;
			box-sizing: border-box;
			&:nth-child(3n + 3) {
				margin-right: 0;
			}
			.name {
				font-size: 15px;
				color: white;
				font-weight: 400;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				img {
					width: 34px;
					height: 34px;
				}
			}
			.sum {
				font-size: 16px;
				color: white;
				font-weight: 400;
			}
		}
	}
}
</style>
